<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oceditor demo</title>
    <!--<link rel="stylesheet" href="css/bootstrap.css">-->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="dist/css/oceditor.css">
    <link rel="stylesheet" href="dist/highlight/styles/docco.css"/>
    <style>
        .navbar {
            margin-bottom: 0;
        }
        /*body{ -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); padding-top: 20px; }*/
    </style>
</head>
<body>
<nav class="navbar navbar-default <!--navbar-fixed-top-->">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://liuqianfei.com" target="_blank" style="color: #28B0B5;font-weight: bold"><Strong>LQF</Strong></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">获取MarkDown</a></li>
                <li><a href="#">获取HTML</a></li>
            </ul>
            <form class="navbar-form navbar-left visible-md-block visible-lg-block" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索……">
                    <span class="input-group-btn">
                        <button class="btn btn-success" type="submit">搜索</button>
                    </span>
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right" id="mr_ul">

            </ul>
        </div>
    </div>
</nav>



<div class="main container">
    <div class="row">
        <div class="col-md-12">
            <!--<textarea id="oc-editor" placeholder="请输入……">init data..</textarea>-->
            <div id="oc-editor"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <br>
            <button type="button" class="btn btn-primary" id="mdBtn">获取MarkDown</button>
            <button type="button" class="btn btn-primary" id="htmlBtn">获取HTML</button>
            <button type="button" class="btn btn-primary" id="selectionBtn">获取光标所选</button>
            <button type="button" class="btn btn-primary" id="selectBtn">选中测试</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <br>
            <pre><code>$('#oc-editor').oceditor({height: 400, toolbarFixedTop: 50, mode: 'live'});</code></pre>
        </div>
    </div>
</div>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
底部

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<!--<script type="text/javascript" src="js/bootstrap.js"></script>-->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/fileupload.js"></script>
<script type="text/javascript" src="dist/js/markdown.parser.js"></script>
<script type="text/javascript" src="dist/js/oceditor.js"></script>
<script type="text/javascript" src="dist/js/oceModal.js"></script>
<script type="text/javascript" src="dist/highlight/highlight.pack.js"></script>
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript">
    var txt = $('#oc-editor').oceditor({height: 400, toolbarFixedTop: 0, mode: 'live'});
</script>
</body>
</html>